<!-- 页面容器 -->
<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">{{ title }}</h2>
      <slot name="header-extra"></slot>
    </div>
    <!-- 页面内容 -->
    <div class="page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: '页面标题'
  }
})
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  // padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;

    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #1989fa;
      margin: 0;
    }
  }

  .page-content {
    width: 100%;
  }
}
</style>